<template>
<div class="bg">
  <h1 class="predict" v-show="info.isFirst">欢迎使用！</h1>
  <h1 v-show="info.isLoading">加载中...</h1>
  <h1 v-show="info.emsg">错误信息：{{info.emsg}}</h1>
  <div class="pro-list">
    <div class="pro-item" v-for="user in info.users" :key="user.login">
      <a :href="user.html_url" class="aitem">
        <img :src="user.avatar_url" alt="">
      </a>
      <div class="text">{{ user.login }}</div>
    </div>
  </div>
</div>
</template>

<script>
    export default {
      name: "List",
      data(){
          return{
            isShow:false,
            users:[],
            info:{
              isFirst:true,
              isLoading:false,
              emsg:"",
              users:[]
            }
          }
      },
      mounted() {
        this.$bus.$on('updateListData',(dataObj)=>{
          this.info={...this.info,...dataObj}
        })
      }
    }
</script>

<style scoped lang="less">
.bg{
  margin: 0 20px;
  font-size: 24px;
  .pro-list{
    display: flex;
    flex-wrap: wrap;
    .pro-item{
      margin: 50px  120px;
      .aitem{
        display: inline-block;
        width: 200px;
        height: 200px;
      }
      img{
        width: 200px;
        height: 200px;
      }
      .text{
        text-align: center;
      }
    }
  }

}
</style>
